<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div class="avatar">
                <img v-lazy="{src:info.headImgUrl}" alt="">
            </div>
            <p class="name">{{info.nickname || info.mobileNo}}</p>
            <div class="parting">
                <span></span>
            </div>
            <p class="text">{{authorization ? '请确认更换手机号' : '请确认授权信息'}}</p>
            <p>·将{{authorization ? '更新' : '获取'}}您的全部信息（账号，信息等）</p>
            <button style="margin-top: 1rem" class="btns" @click="btnClick">{{authorization ? '更换账号' : '授权'}}</button>
            <v-validCode :mobile="info.wmobileNo" :codeFlag="codeFlag" nextText="授权" @nextStep="nextStep" @closeMask="closeMask"></v-validCode>
        </div>
    </div>
</template>
<script>
    import {TransferDom, Popup} from 'vux'
    import {SETAUTHORIZATION} from 'store/authorization'
    import {mapActions} from 'vuex'
    export default {
        name: 'authorizationInfo',
        directives: {
            TransferDom
        },
        components:{
            Popup
        },
        data(){
            return{
                authorization : false,
                codeFlag:false,
                info:{
                }
            }
        },
        activated(){
            this.init()
        },
        methods:{
            ...mapActions([SETAUTHORIZATION]),
            init(){
                this.authorization = false
                this.codeFlag = false
                this.info= {}
                this.queryinfobyidentificationCode()
            },
            queryinfobyidentificationCode(){
                this.$ajax.queryinfobyidentificationCode({identificationCode:this.$route.query.identificationCode})
                    .then((res) => {
                        this.info = res.body.content
                        this.authorization = this.info.status
                    })
            },
            btnClick(){
                if(this.authorization){
                    this.codeFlag = true
                }else{
                    this.info.identificationCode = this.$route.query.identificationCode
                    this.SETAUTHORIZATION(this.info)
                    this.$router.push({path:'/authorization/password'})
                }
            },
            nextStep(data){
                this.codeFlag = false
                if(this.authorization){
                    this.info.validCode = data
                    this.info.identificationCode = this.$route.query.identificationCode
                    this.SETAUTHORIZATION(this.info)
                    this.$router.push({path:'/authorization/mobile'})
                }else{
                    this.identification(data)
                }

            },

            closeMask(){
                this.codeFlag = false
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "./css/common.css";
    p{
        text-align: center;
    }
    .main_allScroll{
        padding-top: .88rem;
        background-color: #fff;
    }
    .avatar{
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto .24rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .name{
        font-size: .3rem;
        color: #333;
        margin-bottom: .66rem;
        text-align: center;
    }
    .parting{
        padding: 0 .6rem;
        margin-bottom: .56rem;
        span{
            display: block;
            height: 1px;
            background-color: #eee;
        }
    }
    .text{
        font-size: .32rem;
        color: #333;
        margin-bottom: .42rem;
        text-align: center;
        & + p{
            font-size: .28rem;
            color: #888;
            line-height: 1.5;
        }
    }
    .authorzatiton_alert{
        width: 5.64rem;
        height: 6.7rem;
        background: url("../../assets/img/authorzatiton_alert.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding-top: 3.06rem;
    }
    .alert_btn{
        width: 4.64rem;
        height: 1.36rem;
        background: url("../../assets/img/authorzatiton_alert_btn.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        text-align: center;
        line-height: 1.36rem;
        color: #fff;
        font-size: .32rem;
    }
</style>